<!-- eslint-disable vue/no-mutating-props -->
<template>
  <table-index :table="table" @loadData="loadData">
    <!-- 支出单号 -->
    <template #code="{ record }">
      <div class="order-info-item">
        <div>{{ record.code }}</div>
      </div>
      <!-- 订单标签 -->
      <a-space wrap>
        <tag type="primary" v-for="(item, index) in record.labelList" :key="index">{{ item }}</tag>
      </a-space>
    </template>
    <!-- 审批状态 -->
    <template #checkStatus="{ record }">
      <div :class="['checkStatus_' + record.checkStatus]">{{ record.checkStatusName }}</div>
      <!-- 驳回 -->
      <a-tag style="cursor: pointer" bordered color="blue" v-if="record.checkStatus == 6" @click="showReason(record)">原因</a-tag>
    </template>
    <!-- 审批流 -->
    <template #checkFlowList="{ record }">
      <!-- 无需审批显示- -->
      <div v-if="record.checkStatus == 1">-</div>
      <template v-else>
        <div v-for="(item, index) in record.checkFlowList" :key="index">
          <div v-if="item.staffId">
            <span class="fixed_width">{{ item.staffName || '-' }} </span>|
            <span :class="['checkStatus_' + item.status]">{{ item.statusName || '-' }}</span>
            <div class="td-divider" v-if="index != record.checkFlowList.filter((i) => i.staffId).length - 1"></div>
          </div>
        </div>
      </template>
    </template>
    <!-- 关联业务信息 -->
    <template #orderInfo="{ record }">
      <div v-if="record.workCode">
        <div class="order-info-item">
          {{ record.workTypeName }}
        </div>
        <div class="order-info-item link">
          {{ record.workCode }}
        </div>
      </div>
      <div class="td-divider" v-if="record.workCode && record.businessCode"></div>
      <div v-if="record.businessCode">
        <div class="order-info-item">
          {{ record.businessTypeName }}
        </div>
        <div class="order-info-item link">
          {{ record.businessCode }}
        </div>
      </div>
    </template>
    <!-- 付款状态 -->
    <template #payStatusName="{ record }">
      <span :class="['payStatus_' + record.payStatus]">{{ record.payStatusName || '-' }}</span>
    </template>
    <!-- 支出费项 -->
    <template #feeList="{ record }">
      <template v-for="(item, index) in record.feeList" :key="index">
        {{ item.itemName }}
        <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
      </template>
    </template>
    <!-- 费用金额 -->
    <template #feeAmount="{ record }">
      <div v-for="(item, index) in record.feeList" :key="index">
        <span> {{ item.amount }} </span>
        <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
      </div>
    </template>
    <!-- 车辆信息 -->
    <template #carInfo="{ record }">
      <template v-for="(item, index) in record.feeList" :key="index">
        <div class="flex">
          <div class="carLicenseNo">{{ item.carId ? `${item.licenseNo}` : '-' }}</div>
          <a-tooltip v-if="item.carId" :content="`${item.licenseNo} ${item.carModel}`" position="top" mini>
            <img src="@/assets/view-icon.png" class="carInfo_img" />
          </a-tooltip>
        </div>
        <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
      </template>
    </template>
  </table-index>
</template>

<script setup name="operatePage">
  import { unitVal } from '@/utils'
  import { ref, reactive, onMounted, computed } from 'vue'
  import { Modal, Message, Notification } from '@arco-design/web-vue'
  import { useTable, useFetchTableDataApi, useTableOperates, useTableButtons } from '@/hooks/table'
  import { getCostBillApi } from '@/api/business/operateCost'
  import ReasonModal from '@/views/business/operate-cost/components/reason-modal.vue'

  const memberInfoDto = ref({})
  const props = defineProps({
    workCode: String,
  })

  // table 配置
  const table = useTable({
    columns: [
      { title: '支出单号', slotName: 'code', width: 180, fixed: 'left' },
      { title: '审批状态', slotName: 'checkStatus', width: 100 },
      { title: '审批流', slotName: 'checkFlowList', width: 160 },
      { title: '支出单类型', dataIndex: 'costTypeName', width: 110 },
      // { title: '关联业务信息', slotName: 'orderInfo', width: 200 },
      // { title: '费用产生机构', dataIndex: 'feeOrgName', ellipsis: true },
      { title: '付款状态', slotName: 'payStatusName', width: 100 },
      { title: '支出总额', dataIndex: 'amount', unit: '元', width: 120 },
      { title: '支出费项', slotName: 'feeList', width: 120 },
      { title: '费用金额', slotName: 'feeAmount', unit: '元', width: 120 },
      { title: '车辆信息', slotName: 'carInfo', width: 120 },
      { title: '申请人', dataIndex: 'applyStaffName', width: 120 },
      { title: '申请时间', dataIndex: 'applyTime', width: 180 },
      { title: '付款时间', dataIndex: 'payTime', width: 180 },
      { title: '申请备注', dataIndex: 'remark', ellipsis: true },
    ],
    bordered: {
      wrapper: true,
      cell: true,
    },
    tableLoading: false,
  })
  // 列表接口调用
  const loadData = (page, type) => {
    const fn = useFetchTableDataApi(table, { workCode: props.workCode || '' }, getCostBillApi)
    fn(page).then((res) => {
      // 过滤掉审批流程没有审批人的
      res.data.forEach((item) => {
        item.checkFlowList = item.checkFlowList.filter((item) => item.staffId)
      })
    })
  }

  // 展示原因弹框
  const reasonModalRef = ref()
  const showReason = (record) => {
    reasonModalRef.value.open(record, 'bill')
  }

  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .checkStatus {
    &_1 {
      color: #722ed1;
    }
    &_2 {
      color: #ff7d00;
    }
    &_3 {
      color: #1890ff;
    }
    &_4 {
      color: #00b42a;
    }
    &_5 {
      color: #86909c;
    }
    &_6 {
      color: #f76964;
    }
    &_7 {
      color: #f76964;
    }
  }
  .payStatus_ {
    &_0 {
      color: #ff7d00;
    }
    &_1 {
      color: #00b42a;
    }
  }
  .fixed_width {
    min-width: 46px;
    padding-right: 4px;
    display: inline-block;
  }
  .link {
    color: #1890ff;
  }

  .order-info-item {
    .custom-tag {
      margin-right: 8px;
      margin-bottom: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 10px;
  }
  .carLicenseNo {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .carInfo_img {
    height: 16px;
    width: 16px;
    margin: 2px;
  }
</style>
